Completed
Push — master ( 48e0cc...46633a )
by Maxence
02:57
created

elements.initUI   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 19

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
dl 0
loc 19
rs 9.4285
c 0
b 0
f 0
cc 1
nc 1
nop 0
1
/*
2
 * Circles - Bring cloud-users closer together.
3
 *
4
 * This file is licensed under the Affero General Public License version 3 or
5
 * later. See the COPYING file.
6
 *
7
 * @author Maxence Lange <[email protected]>
8
 * @copyright 2017
9
 * @license GNU AGPL version 3 or any later version
10
 *
11
 * This program is free software: you can redistribute it and/or modify
12
 * it under the terms of the GNU Affero General Public License as
13
 * published by the Free Software Foundation, either version 3 of the
14
 * License, or (at your option) any later version.
15
 *
16
 * This program is distributed in the hope that it will be useful,
17
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
18
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
19
 * GNU Affero General Public License for more details.
20
 *
21
 * You should have received a copy of the GNU Affero General Public License
22
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
23
 *
24
 */
25
26
/** global: OC */
27
/** global: OCA */
28
/** global: Notyf */
29
30
/** global: nav */
31
/** global: actions */
32
/** global: settings */
33
/** global: resultCircles */
34
/** global: curr */
35
/** global: api */
36
/** global: define */
37
38
var elements = {
39
40
	newTypeDefinition: null,
41
	newType: null,
42
	newSubmit: null,
43
	newName: null,
44
	navigation: null,
45
	circlesList: null,
46
	circlesSearch: null,
47
	circlesFilters: null,
48
	circlesDetails: null,
49
	emptyContent: null,
50
	mainUI: null,
51
	mainUIMembersTable: null,
52
	mainUILinksTable: null,
53
	membersSearchResult: null,
54
	memberDetails: null,
55
	memberRequest: null,
56
57
	joinCircleInteraction: null,
58
	joinCircleAccept: null,
59
	joinCircleReject: null,
60
	joinCircleRequest: null,
61
	joinCircleInvite: null,
62
	joinCircle: null,
63
	leaveCircle: null,
64
	destroyCircle: null,
65
66
	settingsPanel: null,
67
	settingsName: null,
68
	settingsLink: null,
69
	settingsLinkAuto: null,
70
	settingsLinkFiles: null,
71
	settingsEntryLink: null,
72
	settingsEntryLinkAuto: null,
73
	settingsEntryLinkFiles: null,
74
	settingsSave: null,
75
76
	rightPanel: null,
77
	addMember: null,
78
	remMember: null,
79
	linkCircle: null,
80
81
	buttonCircleActions: null,
82
	buttonCircleActionReturn: null,
83
	buttonCircleSettings: null,
84
	buttonAddMember: null,
85
	buttonLinkCircle: null,
86
87
88
	initElements: function () {
89
90
		elements.newTypeDefinition = $('#circles_new_type_definition');
91
		elements.newType = $('#circles_new_type');
92
		elements.newSubmit = $('#circles_new_submit');
93
		elements.newName = $('#circles_new_name');
94
		elements.navigation = $('#app-navigation.circles');
95
		elements.circlesList = $('#circles_list');
96
		elements.circlesSearch = $('#circles_search');
97
		elements.circlesFilters = $('#circles_filters');
98
		elements.circlesDetails = $('#circle_details');
99
		elements.emptyContent = $('#emptycontent');
100
		elements.mainUI = $('#mainui');
101
102
		elements.mainUIMembers = $('#memberslist');
103
		elements.mainUIMembersTable = $('#memberslist_table');
104
		elements.mainUILinksTable = $('#linkslist_table');
105
		elements.membersSearchResult = $('#members_search_result');
106
		elements.memberDetails = $('#memberdetails');
107
		elements.memberRequest = $('#member_request');
108
109
		elements.joinCircleInteraction = $('#sjoincircle_interact');
110
		elements.joinCircleAccept = $('#joincircle_acceptinvit');
111
		elements.joinCircleReject = $('#joincircle_rejectinvit');
112
		elements.joinCircleRequest = $('#joincircle_request');
113
		elements.joinCircleInvite = $('#joincircle_invit');
114
		elements.joinCircle = $('#joincircle');
115
		elements.leaveCircle = $('#leavecircle');
116
		elements.destroyCircle = $('#circle-actions-delete');
117
118
		elements.settingsPanel = $('#settings-panel');
119
		elements.settingsName = $('#settings-name');
120
		elements.settingsLink = $('#settings-link');
121
		elements.settingsLinkAuto = $('#settings-link-auto');
122
		elements.settingsLinkFiles = $('#settings-link-files');
123
		elements.settingsEntryLink = $('#settings-entry-link');
124
		elements.settingsEntryLinkAuto = $('#settings-entry-link-auto');
125
		elements.settingsEntryLinkFiles = $('#settings-entry-link-files');
126
		elements.settingsSave = $('#settings-submit');
127
128
		elements.rightPanel = $('#rightpanel');
129
		elements.addMember = $('#addmember');
130
		elements.remMember = $('#remmember');
131
		elements.linkCircle = $('#linkcircle');
132
133
		elements.buttonCircleActions = $('#circle-actions-buttons');
134
		elements.buttonCircleActionReturn = $('#circle-actions-return');
135
		elements.buttonCircleSettings = $('#circle-actions-settings');
136
		elements.buttonAddMember = $('#circle-actions-add');
137
		elements.buttonLinkCircle = $('#circle-actions-link');
138
		elements.buttonJoinCircle = $('#circle-actions-join');
139
	},
140
141
142
	initTweaks: function () {
143
		$.fn.emptyTable = function () {
144
			this.children('tr').each(function () {
145
				if ($(this).attr('class') !== 'header') {
146
					$(this).remove();
147
				}
148
			});
149
		};
150
	},
151
152
153
	initUI: function () {
154
		elements.newTypeDefinition.children('div').fadeOut(0);
155
		$('#circles_new_type_' + elements.newType.children('option:selected').val()).fadeIn(
156
			0);
157
158
		elements.newType.hide();
159
		elements.newSubmit.hide();
160
		elements.newTypeDefinition.hide();
161
162
		$('.icon-circles').css('background-image',
163
			'url(' + OC.imagePath('circles', 'colored') + ')');
164
165
		var theme = $('#body-user').find('#header').css('background-color');
166
		elements.circlesList.css('background-color', theme);
167
		elements.circlesDetails.css('background-color', theme);
168
		elements.rightPanel.css('background-color', theme);
169
170
		elements.membersSearchResult.hide();
171
	},
172
173
174
	/**
175
	 *
176
	 */
177
	initExperienceCirclesList: function () {
178
179
		elements.circlesList.children('div').on('click', function () {
180
			nav.displayCirclesList($(this).attr('circle-type'));
181
		});
182
183
		this.initExperienceCirclesListFromSearch();
184
		this.initExperienceCirclesListFromFilter();
185
	},
186
187
188
	initExperienceCirclesListFromSearch: function () {
189
190
		this.circlesSearch.on('input property paste focus', function () {
191
			var search = $(this).val().trim();
192
			if (curr.searchCircle === search) {
193
				return;
194
			}
195
196
			curr.searchCircle = search;
197
			api.listCircles(curr.circlesType, curr.searchCircle, curr.searchFilter,
198
				resultCircles.listCirclesResult);
199
		});
200
	},
201
202
203
	initExperienceCirclesListFromFilter: function () {
204
205
		this.circlesFilters.on('input property paste focus', function () {
206
			var searchFilter = $(this).val();
207
			if (curr.searchFilter === searchFilter) {
208
				return;
209
			}
210
211
			curr.searchFilter = searchFilter;
212
			api.listCircles(curr.circlesType, curr.searchCircle, curr.searchFilter,
213
				resultCircles.listCirclesResult);
214
		});
215
216
	},
217
218
219
	/**
220
	 *
221
	 */
222
	initExperienceCircleButtons: function () {
223
224
		elements.buttonCircleActionReturn.hide();
225
		elements.buttonCircleActionReturn.on('click', function () {
226
			nav.circlesActionReturn();
227
		});
228
229
		elements.buttonAddMember.on('click', function () {
230
			settings.displaySettings(false);
231
			nav.displayCircleButtons(false);
232
			nav.displayAddMemberInput(true);
233
			nav.displayLinkCircleInput(false);
234
			nav.displayJoinCircleButton(false);
235
		});
236
237
		elements.buttonLinkCircle.on('click', function () {
238
			settings.displaySettings(false);
239
			nav.displayCircleButtons(false);
240
			nav.displayAddMemberInput(false);
241
			nav.displayLinkCircleInput(true);
242
			nav.displayJoinCircleButton(false);
243
		});
244
245
		elements.buttonCircleSettings.on('click', function () {
246
			settings.displaySettings(true);
247
			nav.displayCircleButtons(false);
248
			nav.displayAddMemberInput(false);
249
			nav.displayLinkCircleInput(false);
250
			nav.displayJoinCircleButton(false);
251
		});
252
253
		elements.buttonJoinCircle.on('click', function () {
254
			nav.joinCircleAction();
255
		});
256
257
258
		elements.settingsSave.on('click', function () {
259
				actions.saveSettings();
260
			}
261
		);
262
	},
263
264
265
	/**
266
	 *
267
	 */
268
	initAnimationNewCircle: function () {
269
270
		elements.newName.on('keyup', function () {
271
			actions.onEventNewCircleName();
272
		});
273
274
		elements.newType.on('change', function () {
275
			actions.onEventNewCircleType();
276
		});
277
278
		elements.newSubmit.on('click', function () {
279
			api.createCircle(elements.newType.val(), elements.newName.val(),
280
				resultCircles.createCircleResult);
281
		});
282
283
	},
284
285
286
	emptyCircleCreation: function () {
287
		elements.newName.val('');
288
		elements.newType.val('');
289
	},
290
291
	fillMembersSearch: function (exact, partial) {
292
		this.fillExactMembersSearch(exact);
293
		this.fillPartialMembersSearch(partial);
294
		elements.membersSearchResult.children().first().css('border-top-width', '0px');
295
	},
296
297
298
	fillExactMembersSearch: function (exact) {
299
		$.each(exact, function (index, value) {
300
			elements.membersSearchResult.append(
301
				'<div class="members_search exact" searchresult="' +
302
				escapeHTML(value.value.shareWith) + '">' + escapeHTML(value.label) + '   (' +
303
				escapeHTML(value.value.shareWith) + ')</div>');
304
		});
305
306
	},
307
308
309
	fillPartialMembersSearch: function (partial) {
310
		$.each(partial, function (index, value) {
311
			var currSearch = elements.addMember.val().trim();
312
			var line = escapeHTML(value.label) + '   (' + escapeHTML(value.value.shareWith) + ')';
313
			if (currSearch.length > 0) {
314
				line = line.replace(new RegExp('(' + currSearch + ')', 'gi'), '<b>$1</b>');
315
			}
316
317
			elements.membersSearchResult.append(
318
				'<div class="members_search" searchresult="' + escapeHTML(value.value.shareWith) +
319
				'">' + line +
320
				'</div>');
321
		});
322
323
	},
324
325
326
	resetCirclesList: function () {
327
328
		elements.navigation.addClass('selected');
329
		elements.navigation.children().each(function () {
330
			if ($(this).attr('id') !== 'circles_search' &&
331
				$(this).attr('id') !== 'circles_filters') {
332
				$(this).remove();
333
			}
334
		});
335
	},
336
337
338
	removeMemberslistEntry: function (membername) {
339
		this.mainUIMembersTable.children("[member-id='" + escapeHTML(membername) + "']").each(
340
			function () {
341
				$(this).hide(300);
342
			});
343
	},
344
345
346
	generateTmplCircle: function (entry) {
347
		var tmpl = $('#tmpl_circle').html();
348
349
		tmpl = tmpl.replace(/%title%/g, escapeHTML(entry.name));
350
		tmpl = tmpl.replace(/%type%/g, t('circles', escapeHTML(entry.type)));
351
		tmpl = tmpl.replace(/%owner%/g, escapeHTML(entry.owner.user_id));
352
		tmpl = tmpl.replace(/%status%/g, t('circles', escapeHTML(entry.user.status)));
353
		tmpl = tmpl.replace(/%level_string%/g, t('circles', escapeHTML(entry.user.level_string)));
354
		tmpl = tmpl.replace(/%creation%/g, escapeHTML(entry.creation));
355
356
		return tmpl;
357
	},
358
359
360
	generateTmplMember: function (entry) {
361
		var tmpl = $('#tmpl_member').html();
362
363
		tmpl = tmpl.replace(/%username%/g, escapeHTML(entry.user_id));
364
		tmpl = tmpl.replace(/%level%/g, escapeHTML(entry.level));
365
		tmpl = tmpl.replace(/%status%/g, escapeHTML(entry.status));
366
		tmpl = tmpl.replace(/%joined%/g, escapeHTML(entry.joined));
367
368
		return tmpl;
369
	},
370
371
	generateTmplLink: function (entry) {
372
		var tmpl = $('#tmpl_link').html();
373
374
		tmpl = tmpl.replace(/%uniqueid%/g, escapeHTML(entry.unique_id.substr(0, 8)));
375
		tmpl = tmpl.replace(/%fulluniqueid%/g, escapeHTML(entry.unique_id));
376
		tmpl = tmpl.replace(/%address%/g, escapeHTML(entry.address));
377
		tmpl = tmpl.replace(/%status%/g, escapeHTML(entry.status));
378
		tmpl = tmpl.replace(/%joined%/g, escapeHTML(entry.creation));
379
380
		return tmpl;
381
	}
382
383
384
};